---
import SectionTitle from '@/components/SectionTitle.astro'
import LiteYouTube from '@/components/LiteYouTube.astro'

const PRESENTATION_VIDEO_ID = 't7r5O_5B-E0'
const CHARLA_VIDEO_ID = 'LO0WiiUl1Z0'
const CARA_A_CARA_VIDEO_ID = 'NcWmLX8953k'
const PESAJE_VIDEO_ID = 'veOY93Frmls'
const LA_VELADA_DEL_ANIO_VIDEO_ID = 'YE2Tmktpp50'
---

<section class="max-w-4xl px-5 py-36 md:mx-auto">
  <SectionTitle class="pb-8" title="La velada del año" />

  <LiteYouTube
    videoId={LA_VELADA_DEL_ANIO_VIDEO_ID}
    title="La velada del año"
    backgroundImage="/images/La-velada-del-año-v.webp"
    withShadowImage={true}
  />
</section>

<section id="Pesaje boxeadores" class="max-w-4xl px-5 py-36 md:mx-auto">
  <SectionTitle class="pb-8" title="Pesaje boxeadores" />

  <LiteYouTube
    videoId={PESAJE_VIDEO_ID}
    title="Pesaje boxeadores"
    backgroundImage="/images/pesaje.webp"
    withShadowImage={true}
  />
</section>

<section id="Cara a cara boxeadores" class="max-w-4xl px-5 py-36 md:mx-auto">
  <SectionTitle class="pb-8" title="Cara a cara boxeadores" />

  <LiteYouTube
    videoId={CARA_A_CARA_VIDEO_ID}
    title="Cara a cara boxeadores"
    backgroundImage="/images/Caraacara.webp"
    withShadowImage={true}
  />
</section>

<section id="Charla con boxeadores y artistas" class="max-w-4xl px-5 py-36 md:mx-auto">
  <SectionTitle class="pb-8" title="Charla con boxeadores y artistas" />

  <LiteYouTube
    videoId={CHARLA_VIDEO_ID}
    title="Charla con boxeadores y artistas a un mes de la velada"
    backgroundImage="/images/charlaconboxeadoresyartistas.webp"
    withShadowImage={true}
  />
</section>

<section id="presentation" class="max-w-4xl px-5 py-36 md:mx-auto">
  <SectionTitle class="pb-8" title="Presentación de la Velada V" />

  <LiteYouTube
    videoId={PRESENTATION_VIDEO_ID}
    title="Presentación de La Velada V"
    backgroundImage="/images/presentation-video-cover.webp"
    withShadowImage={true}
  />
</section>
